<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>

<div id="all">
    <div class="top">
        <input type="text" v-model="text">
        <button v-on:click="seek">搜索</button>
    </div>
</div>




<script src="jquery-3.5.1.js"></script>
<script src="vue.js"></script>
<script>

    new Vue({
        el: '#all',
        data: {
            text:'准备展示妹子',
            return:{
                imgUrl: `https://img-blog.csdnimg.cn/20190119200309604.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTgzMjgx,size_16,color_FFFFFF,t_70`
            }
        },
        methods: {
            seek() {
                new Promise((resolve, reject) => {
                    $.ajax({
                        url: `https://gank.io/api/v2/data/category/Girl/type/Girl/page/1/count/10`,
                        success(res) {
                            resolve(res)
                            let pic = res.data
                            for (let i = 0; i < pic.length;i++) {
                                console.log(pic[i].images)
                                let img = document.createElement("img")
                                img.src = pic[i].images
                                all.appendChild(img)
                            }
                        },
                        error(e) {
                            reject(e)
                            console.log(e)
                        }
                    })
                })
                }
            }})




</script>
</body>
</html>